<template>
  <div class="map-container">
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :maxZoom="maxZoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <l-control-layers position="topright" :collapsed="false"></l-control-layers>
    <!-- 1.1基础图层 -->
      <l-tile-layer
        v-for="tile in tileProviders"
        ref="baseLayer"
        :key="tile.name"
        :name="tile.name"
        :visible="tile.visible"
        :url="tile.url"
        :attribution="tile.attribution"
        :options="tile.options"
        layer-type="base"
      />

      
      <!-- 省份层 -->
      <map-protobuf ref="prov" :url="prov.url" :options="prov.opts"></map-protobuf>
      <!-- 地市层 -->
      <map-protobuf ref="city" :url="city.url" :options="city.opts"></map-protobuf>
      <!-- 小区层 -->
      <map-protobuf ref="cgi" :url="cgi.url" :options="cgi.opts"></map-protobuf>
     

     
       <!-- 自定义control内容 -->
      <l-control position="bottomleft">
        <div style="background:white;">
          <el-alert :title="msg" type="error" :closable="false"></el-alert>
        </div>
      </l-control>
    </l-map>
  </div>
</template>
<script>
import {
  LMap,
  LControl,
  LTileLayer,
  LControlLayers,
  LLayerGroup,
  LCircle
} from 'vue2-leaflet'
import MapVectorGridProtobuf from './components/MapVectorGridProtobuf'

export default {
  name: 'MapControlLayer',
  data() {
    return {
      cigId: '',
      color: '#ff0000',
      zoom: 8,
      maxZoom: 16,
      center: [31.6679687, 104.040182 ],
      colors:['#FED976','#FEB24C','#FD8D3C','#FC4E2A','#E31A1C','#BD0026','#800026'],
      // 可选的底图
      tileProviders: [
        {
          name: '高德',
          visible: true,
          url:
            'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德'
        },
        {
          name: '高德卫星',
          visible: false,
          url:
            'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
          options: {
            subdomains: ['1', '2', '3', '4']
          },
          attribution: '高德卫星'
        },
        {
          name: '离线地图',
          visible: false,
          url: 'https://api.maptiler.com/tiles/v3/{z}/{y}/{x}.pbf.pict?key=UmmATPUongHdDmIicgs7',

          attribution: '离线地图'
        }
      ],
      prov: {
        opts: {
          rendererFactory: L.canvas.tile,
          minZoom: 1,
          maxZoom: 6,
          zIndex: 10,
          interactive: true,
          // 唯一id
          getFeatureId: function(f) {
              return f.properties.adcode;
          },
          vectorTileLayerStyles: {
            // key为图层的名称
            'prov': this.getProvStyles
          }
        },
        url: 'http://10.121.138.186:8003/geoserver/gwc/service/tms/1.0.0/cite%3Aprov@3857@pbf/{z}/{x}/{-y}.pbf'
      },
      city: {
        opts: {
          rendererFactory: L.canvas.tile,
          minZoom: 7,
          maxZoom: 11,
          zIndex: 10,
          interactive: true,
          // 唯一id
          getFeatureId: function(f) {
              return f.properties.adcode;
          },
          vectorTileLayerStyles: {
            // key为图层的名称
            'city': this.getProvStyles,
          }
        },
        url: 'http://10.121.138.186:8003/geoserver/gwc/service/tms/1.0.0/cite%3Acity@3857@pbf/{z}/{x}/{-y}.pbf'
      },
      cgi: {
        opts: {
          rendererFactory: L.svg.tile,
          attribution: '小区',
          minZoom: 12,
          maxZoom: 16,
          zIndex: 10,
          // 唯一id
          getFeatureId: function(f) {
              return f.properties.CGI;
          },
          vectorTileLayerStyles: {
            // key为图层的名称
            'cgi-polygon': this.getVectorTileStyles
          }
        },
        url: 'http://10.121.138.186:8003/geoserver/gwc/service/tms/1.0.0/cite%3Acgi-polygon@3857@pbf/{z}/{x}/{-y}.pbf'
      },
      tmpClickId:null ,
      msg:null 
    }
  },
  components: {
    'l-tile-layer': LTileLayer,
    'l-control': LControl,
    'l-control-layers': LControlLayers,
    'l-layer-group': LLayerGroup,
    'l-map': LMap,
    'map-protobuf': MapVectorGridProtobuf
  },
  methods: {
    zoomUpdated(zoom) {
      console.log('zoomUpdated=' + zoom)
    },
    centerUpdated(center) {
      console.log('centerUpdated=' + center)
    },
    boundsUpdated(bounds) {
      console.log('boundsUpdated=' + bounds)
    },
    onClick(e) {
      this.$refs.map.mapObject.fitBounds(e.target.getBounds())
    },
    // 样式
    getProvStyles(properties, zoom, geometryDimension) {
      
      var color = this.colors[properties.adcode%7]
      console.log(properties.name);
      return {
        fill: true,
        weight: 1,
        fillColor: color,
        color: '#06cccc',
        fillOpacity: 0.2,
        opacity: 0.4,
      }
    },
    // 矢量数据样式
    getVectorTileStyles(properties, zoom, geometryDimension) {
      console.log("properties.CGI="+properties.CGI)
      var cgi = parseInt(properties.CGI)
      return {
        fill: true,
        weight: 1,
        fillColor: cgi%2==0?'#06cccc':this.color,
        color: '#06cccc',
        fillOpacity: 0.2,
        opacity: 0.4,
      }
    },
    // 查询小区
    search(){
      // 重置之前的小区样式
      // this.$refs.cgi.mapObject.resetFeatureStyle(this.cigId)

      // 修改小区样式
      this.$refs.cgi.mapObject.setFeatureStyle(this.cigId, {
        fill: true,
        weight: 2,
        fillColor: '#00ff00',
        color: '#06cccc',
        fillOpacity: 0.9,
        opacity: 0.8,
      });

      //122306337 获取小区中心点，修改地图视野
      // this.$refs.map.mapObject.setView([31.129391, 104.402778],16);

    },
    renderVector(){
        this.$refs.cgi.mapObject.redraw()
    },
    resetProv(){
      if(this.tmpClickId){
        this.$refs.prov.mapObject.resetFeatureStyle(this.tmpClickId)
      }
    },
    onProvClick(e){
      this.resetProv()
      this.tmpClickId = e.layer.properties.adcode
      this.msg = e.layer.properties.name 
      // 修改小区样式
      this.$refs.prov.mapObject.setFeatureStyle(this.tmpClickId, {
        fill: true,
        weight: 1,
        fillColor: '#00ff00',
        color: '#06cccc',
        fillOpacity: 0.4,
        opacity: 0.8,
      });
    },
    resetCity(){
      if(this.tmpClickId){
        this.$refs.city.mapObject.resetFeatureStyle(this.tmpClickId)
      }
    },
    onCityClick(e){
      this.resetCity()
      this.tmpClickId = e.layer.properties.adcode
      this.msg = e.layer.properties.name 
      // 修改小区样式
      this.$refs.city.mapObject.setFeatureStyle(this.tmpClickId, {
        fill: true,
        weight: 1,
        fillColor: '#00ff00',
        color: '#06cccc',
        fillOpacity: 0.4,
        opacity: 0.8,
      });
    },
  },
    
  mounted() {
    this.$nextTick(() => {
      this.$refs.prov.mapObject.on('mouseover',this.onProvClick)
      this.$refs.city.mapObject.on('mouseover',this.onCityClick)
    })
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  }
}
</script>
